import React from 'react';
import { messages } from 'share/common';
import { Row, Col, Checkbox, Spin } from 'antd';
import 'styles/expense-report/template/select-pay-info.scss'

class SelectPayInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedId: '',
    }
  }

  onChange = (e, id, index) => {
    const { dataList } = this.props;
    this.setState({ selectedId: e.target.checked ? id : '' }, () => {
      this.props.onSelect(this.state.selectedId, dataList[index])
    })
  };

  render() {
    const { dataList, loading } = this.props;
    const { selectedId } = this.state;
    return (
      <div className="select-pay-info">
        <div className="pay-info-title">{messages('expense-1.key536')/*选择已有付款行*/}：</div>
        <Spin spinning={loading}>
          {dataList.map((item, index) => (
            <Row>
              <Col span={1} offset={6}>
                <Checkbox
                  prefixCls="ant-radio"
                  value={item.id}
                  checked={item.id === selectedId}
                  onChange={e => this.onChange(e, item.id, index)}
                />
              </Col>
              <Col span={16}>
                <div className="payee-name">{item.payeeName}</div>
                <div>
                  [{item.payeeType === 1002 ? messages('expense-1.key491')/*员工*/ : messages('expense-1.key490')/*供应商*/}]
                  &nbsp;{item.accountNumber}
                </div>
              </Col>
            </Row>
          ))}
        </Spin>
      </div>
    )
  }
}

SelectPayInfo.propsType = {
  loading: React.PropTypes.bool,
  dataList: React.PropTypes.array,
  onSelect: React.PropTypes.func,
};

export default SelectPayInfo
